<script setup lang="ts">
import { Icon } from 'vant';

defineOptions({
    name: 'BiNavBar'
})

interface Props {
    title?: string,
    leftText?: string,
    leftTextSize?: string,
    backgroundColor?: string,
    arrowColor?: string,
    arrowSize?: string,
    textColor?: string,
}
const props = withDefaults(defineProps<Props>(), {
    backgroundColor: '#6b61ad',
    arrowColor: 'rgba(255, 255, 255, 0.64)',
    arrowSize: '9vmin',
    leftTextSize: '20px'
})

const emit = defineEmits(['clickLeft', 'clickRight'])

</script>

<template>
    <header class="head" :style="{ backgroundColor: props.backgroundColor }">
        <div class="left" @click="emit('clickLeft')">
            <Icon name="arrow-left" :color="props.arrowColor" :size="props.arrowSize" />
            <span v-if="props.leftText" :style="{ fontSize: props.leftTextSize }">{{ props.leftText }}</span>
        </div>
        <div class="title" v-if="props.title">
            <slot name="center">
                <span class="van-ellipsis" :style="{ color: props.textColor }">{{ props.title }}</span>
            </slot>
        </div>
        <div class="right" @click="emit('clickRight')">
            <slot name="right">
            </slot>
        </div>
    </header>
</template>

<style scoped lang="scss">
@import url(./index.scss);
</style>